<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--仓库数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="tabName"
            placeholder="请输入组织名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 10px"
          />
        </div>
<!--        <div class="addFolder" @click="handleAdd('1')">创建文件夹</div>-->
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span :title="node.label" class="show-ellipsis">
                 <i v-if="data.pid == -1">
                   <img src="@/assets/images/wjj.png" style="height:18px">
                 </i>
                  <i v-else>
                    <img src="@/assets/images/wj.png" style="height:17px">
                  </i>
                  {{ node.label }}
                </span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-tabs type="card">
          <el-tab-pane label="仓库数据">
<!--            <el-row :gutter="10" class="mb8">-->
<!--              <el-col :span="1.5">-->
<!--                <el-button-->
<!--                  type="primary"-->
<!--                  plain-->
<!--                  icon="el-icon-plus"-->
<!--                  size="mini"-->
<!--                  :disabled="addBtn"-->
<!--                  @click="handleAdd('2')"-->
<!--                  v-hasPermi="['manage:stuinfo:add']"-->
<!--                >新增仓库</el-button>-->
<!--              </el-col>-->
<!--              <el-col :span="1.5">-->
<!--                <el-button-->
<!--                  type="success"-->
<!--                  plain-->
<!--                  icon="el-icon-edit"-->
<!--                  size="mini"-->
<!--                  :disabled="single"-->
<!--                  @click="handleUpdate"-->
<!--                  v-hasPermi="['manage:stuinfo:edit']"-->
<!--                >修改仓库</el-button>-->
<!--              </el-col>-->
<!--              <el-col :span="1.5">-->
<!--                <el-button-->
<!--                  type="danger"-->
<!--                  plain-->
<!--                  icon="el-icon-delete"-->
<!--                  size="mini"-->
<!--                  :disabled="single"-->
<!--                  @click="handleDelete"-->
<!--                  v-hasPermi="['manage:stuinfo:remove']"-->
<!--                >删除仓库</el-button>-->
<!--              </el-col>-->
<!--            </el-row>-->

            <div class="infoTitle">
              基本信息
            </div>
            <div style="margin-top: 18px">
              <el-form  :model="form"  label-width="80px" >
                <el-row >
                  <el-col :span="6" v-if="isFile1">
                    <el-form-item label="父名称" prop="fname">
                      <el-input v-model="form.fname" :disabled="true"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="名称" prop="tabName">
                      <el-input v-model="form.tabName" :disabled="true"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="isFile1">
                    <el-form-item label="编号" prop="tabNameEn">
                      <el-input v-model="form.tabNameEn" :disabled="true"/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>

            <div class="infoTitle"
                 v-if="showTable">
              数据信息
            </div>
            <tab-data ref="tabData"
                      v-if="showTable">
            </tab-data>
          </el-tab-pane>
          <el-tab-pane label="数据采集">
            <div class="infoTitle">
              基本信息
            </div>
            <div style="margin-top: 18px">
              <el-form  :model="form"  label-width="80px" >
                <el-row >
                  <el-col :span="6" v-if="isFile1">
                    <el-form-item label="父名称" prop="fname">
                      <el-input v-model="form.fname" :disabled="true"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="名称" prop="tabName">
                      <el-input v-model="form.tabName" :disabled="true"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="isFile1">
                    <el-form-item label="编号" prop="tabNameEn">
                      <el-input v-model="form.tabNameEn" :disabled="true"/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>

            <div class="infoTitle">
              数据导入
            </div>
            <el-button
                type="info"
                plain
                icon="el-icon-upload2"
                size="mini"
                @click="handleImport">导入</el-button>
            <el-button
                type="primary"
                plain
                icon="el-icon-caret-right"
                size="mini"
                @click="submitImport">提交</el-button>

            <el-table v-if= "showTab"  :data="tabList" >
              <el-table-column type="index" label="序号" align="center" />
              <el-table-column v-for="item in fieldList"
                               :key="item"
                               :prop="item"
                               align="center"
                               min-width="150"
                               fit
                               :label="item">
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                  >修改</el-button>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>


          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls,txt,xml"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :on-exceed="handleExced"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls” “xlsx” “txt” “xml”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {updateDatabase,getTree,addDatabase,delDatabase,importDataToTab} from "@/api/manage/database";
  import tabData from "./tabdata";
  import { getToken } from "@/utils/auth";

  export default {
    name: "datacollect",
    components: {tabData},
    data() {
      return {
        // 遮罩层
        loading: true,
        // 非单个禁用
        single: true,

        // 非多个禁用
        multiple: true,
        // 弹出层标题
        folderTitle: "",
        // 是否显示弹出层
        folderOpen: false,
        // 表单参数
        form: {
          tabNameEn:null,
          tabName:null,
          fname:null
        },
        folderForm: {},
        // 表单校验
        folderRules: {
          tabName: [{ required: true, message: "名称不能为空", trigger: "blur" }]
          // tabNameEn: [{ required: true, message: "编号不能为空", trigger: "blur" }]
        },
        // 数据仓名称
        tabName: undefined,
        // 组织树选项
        deptOptions: undefined,
        defaultProps: {
          children: "children",
          label: "label"
        },
        currentData: {},
        showTable:false,
        showTab:false,
        isFile:false,
        isFile1:false,
        isLeaf:false,
        // 数据导入
        upload: {
          // 是否显示弹出层
          open: false,
          // 弹出层标题
          title: "",
          // 是否禁用上传
          isUploading: false,

          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/manage/field/importData"
        },
        tabList:[],
        fieldList:[],
      };
    },
    watch: {
      // 根据名称筛选组织树
      tabName(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      this.getTree();
    },
    methods: {

      /** 导入按钮操作 */
      handleImport() {
        this.upload.title = "请选择文件";
        this.upload.open = true;
      },

      // 文件上传中处理
      handleFileUploadProgress() {
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file) {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.showTab = true
        this.tabList = response.data.tabData
        this.fieldList = response.data.fields
      },
      handleExced(){
        this.msgError("最多只能上传1个文件")
      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      },

      submitImport(){
        if(this.tabList.length == 0){
          this.msgError("请先上传文件再提交数据!")
        } else if(this.form.tabNameEn == null){
          this.msgError("请选择要提交数据的库!")
        }
        importDataToTab({
          tabNameEn:this.form.tabNameEn,
          tabData:this.tabList
        }).then(res =>{
          this.msgInfo(res.data)
        })
      },

      /** 查询下拉树 */
      getTree() {
        getTree().then(response => {
          this.deptOptions = response.data;
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data,node) {
        this.currentData = data;
        this.isLeaf = node.isLeaf
        this.form.tabName = data.label
        this.single = false
        // 文件夹
        if(data.pid == -1){
          this.isFile1 = false
          this.showTable = false
        }else{
          this.isFile1 = true
          this.form.tabNameEn = data.tabNameEn
          this.form.fname = node.parent.data.label
          this.showTable = true
          this.$nextTick(() => {
            this.$refs.tabData.getList(data.tabNameEn)
          })
        }
        //this.getList();
      },

      // 取消按钮
      cancel(e) {
        if(e == 1){
          this.folderOpen = false;
          this.reset(e);
        }else {

        }
      },

      // 表单重置
      reset(e) {
        if(e == 1 || e == 2){
          this.folderForm = {}
          this.resetForm("folderForm");
        }
      },

      /** 新增按钮操作 */
      handleAdd(e) {
        this.reset(e);
        if(e == 1){
          this.folderOpen = true
          this.folderTitle = "新增文件夹";
          this.isFile = false
        } else if(e == 2){
          this.folderForm.fname = this.currentData.label
          this.folderForm.pid = this.currentData.id
          this.folderOpen = true;
          this.folderTitle = "新增仓库";
          this.isFile = true
        }else {

        }
      },

      /** 提交按钮 */
      submitForm() {
        this.$refs["folderForm"].validate(valid => {
          if (valid) {
            if (this.folderForm.id != null) {
              updateDatabase(this.folderForm).then(() => {
                this.msgSuccess("修改成功");
                this.folderOpen = false;
                this.getTree();
              });
            } else {
              addDatabase(this.folderForm).then(res => {
                if(res.data){
                  this.msgSuccess("新增成功");
                }else {
                  this.msgError("该数据仓库已存在!");
                  return
                }
                this.folderOpen = false;
                this.getTree();
              });
            }
          }
        });
      },
      handleUpdate(){
        this.folderForm = {
          fname:this.form.fname,
          id:this.currentData.id,
          tabName:this.currentData.label
        }
        this.folderOpen = true;
        this.folderTitle = "修改仓库信息";
        // 文件夹
        if(this.currentData.pid == -1){
          this.isFile = false
        }else {
          this.isFile = true
        }
      },
      /** 删除按钮操作 */
      handleDelete() {
        if(!this.isLeaf){
          this.msgError("请先删除子节点!");
          return
        }
        const id = this.currentData.id
        this.$confirm('是否确认删除编号为"' + id + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delDatabase(id);
        }).then(() => {
          this.getTree();
          this.msgSuccess("删除成功");
        })
      },
    }
  };
</script>
<style scoped>
  .infoTitle {
    height: 36px;
    background-color: #f9f9f9;
    padding-left: 23px;
    line-height: 36px;
    color: #333;
    font-size: 14px;
    margin-bottom: 18px;
  }

</style>
